<template>
  <div>【关键词条】</div>
  <div ref="target" class="w-full flex-1"></div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

watch(
  () => props.data,
  () => {
    renderChart();
  }
);

// 1、初始化echart实例
let myChart = null;
const target = ref(null); // 此处的target与div中的ref=“target”一致
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});

const randomRGB = () => {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  return `rgb(${r}, ${g}, ${b})`;
};

// 2、构建option配置对象
const renderChart = () => {
  const options = {
    series: [
      {
        type: 'wordCloud',
        sizeRange: [10, 32], // 最大字号与最小字号
        rotationRange: [0, 0], // 文字旋转
        gridSize: 0, // 字体间距
        layoutAnimation: true, // 文字动画
        textStyle: {
          color: randomRGB, // 颜色是随机的，创建一个方法，随机生成颜色
        },
        emphasis: {
          textStyle: {
            fontWeight: 'bold',
            color: '#000',
          },
        },
        data: props.data,
      },
    ],
  };

  // 3、通过实例.setOption
  myChart.setOption(options);
};
</script>
<style lang="scss" scoped></style>
